<template>
	<view>
		<view class="p-20">
			<view class="p-b-10">
				<text class="cred  f30">程序里都是演示图标请自行更换;</text>
				<text class="ml1 cred">https://www.iconfont.cn/</text>
				<text class="ml1 cred">图标库;尊重原创版权可以付款购买图标哦(一般2元一个)</text>
			</view>
			<view class="flex j-c" style="width: 400px;position: fixed;bottom: 50px;z-index: 88;">
				<view class=" flex a-c j-c  b_y cff" @click="on_users_cx()" type="primary"
					style="width: 400px;height: 50px;background-color: #007AFF;" size="mini">保存</view>
			</view>
			<view class="flex">
				<view class=" " style="width: 300px;background-color: #F5F5F5;height: 500px;">
					<view class="flex" style="padding-top: 425px;">
						<view class="t-c" v-for="(vo,index) in tabbar_list" style="width:25%;">
							<text class="f-26" :style="'color: ' + text_color  ">{{vo.text}}</text>
							<view class="pt1">
								<image style="width: 30px;height: 30px;" :src="vo.iconPath"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="ml2" style="background-color: #F5F5F5;">
					<view class="p-20">
						<view class="flex a-c  p-b-15" v-for="(vo,index) in tabbar_list">
							<view style="width: 150px;">
								<uni-easyinput v-model="vo.text">
								</uni-easyinput>
							</view>
							<view class="ml2">
								<image style="width: 40px;height: 40px;" :src="vo.iconPath"></image>
							</view>
							<view class="ml1">
								<view class="ml1">
									<text class="f-26">未中的图标</text>
								</view>
								<button @click="on_img(0,index)" type="primary" size="mini">更换图标</button>
							</view>
							<view class="ml2">
								<image style="width: 40px;height: 40px;" :src="vo.selectedIconPath"></image>
							</view>
							<view class="ml1">
								<view class="ml1">
									<text class="f-26">选中的图标</text>
								</view>
								<button @click="on_img(1,index)" type="primary" size="mini">更换图标</button>
							</view>
						</view>

					</view>

					<view class="flex a-c  p-b-15">
						<view class="flex a-c">
							<view class="ml2">
								<view @click="open_color(0)" class="color_w"
									:style="'background-color: ' + text_color  ">
								</view>
							</view>
							<text class="f-26 ml1">未选中颜色</text>
							<button @click="open_color(0)" type="primary" class="ml1" size="mini">选择颜色</button>
						</view>
					</view>
					<view class="flex a-c  p-b-15">
						<view class="flex a-c">
							<view class="ml2">
								<view @click="open_color(1)" class="color_w"
									:style="'background-color: ' + selected_color  ">
								</view>
							</view>
							<text class="f-26 ml1">选中的颜色</text>
							<button @click="open_color(1)" type="primary" class="ml1" size="mini">选择颜色</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;">

		</view>
		<uni-popup ref="alertDialog_image" type="dialog">
			<uni-popup-image :imgList="imgList.length" :count="1" t_type="images" t_name="图片" @confirm="confirm">
			</uni-popup-image>
		</uni-popup>
		<t-color-picker ref="colorPicker" :color="color" @confirm="confirm_color"></t-color-picker>
	</view>
</template>

<script>
 

	export default {
		components: {
			
		},
		data() {
			return {
				my_list1: [],
				my_list2: [],
				token: '',
				t_type: 'image',
				imgList: [],
				selected_color: "#FF1493",
				text_color: '#333',
				color: {
					r: 255,
					g: 0,
					b: 0,
					a: 0.6
				},

				tabbar_list: []

			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			open_color(item) {
				// 打开颜色选择器
				this.$refs.colorPicker.open();
				this.color_index = item
			},
			confirm_color(e) {
				if (this.color_index == 0) {
					this.text_color = e.hex
					for (var i = 0; i < this.tabbar_list.length; i++) {
						this.tabbar_list[i]['color'] =this.text_color
					}

				} else {
					this.selected_color = e.hex
					for (var i = 0; i < this.tabbar_list.length; i++) {
						this.tabbar_list[i]['selected_color'] =this.selected_color
					}
				}

			},
			on_img(id, index) {
				this.index = index;
				this.id = id;
				this.$refs.alertDialog_image.open()
			},

			confirm(img) {
				var that = this;
				if (this.id == 0) {
					that.tabbar_list[that.index]['iconPath'] = uni.getStorageSync('img_url') + img[0]['attachment'];
				} else {
					that.tabbar_list[that.index]['selectedIconPath'] = uni.getStorageSync('img_url') + img[0][
						'attachment'
					];
				}

			},


			init() {
				var that = this;

				let requestParams = {};
				this.Htpp.post('banmichaoqiangbizhi.Tongchengset/finds_sjsz', 'app', {
					token: false,
					datalist: requestParams
				}).then(ret => {
					var list = ret.data.data.find.tabbar;
					this.tabbar_list = JSON.parse(list);
					this.text_color= this.tabbar_list[0]['color'];
					this.selected_color= this.tabbar_list[0]['selected_color'];
				})
			},
			on_users_cx() {
				var that = this;
				let requestParams = {
					tabbar: JSON.stringify(this.tabbar_list),
				};
				this.Htpp.post('banmichaoqiangbizhi.Tongchengset/updates_sztcxx', 'app', {
					token: false,
					datalist: requestParams
				}).then(ret => {
					uni.showToast({
						title: ret.data.msg,
						icon: 'none'
					})
				})
			},
		}
	}
</script>

<style>
	.color_w {
		width: 25px;
		height: 25px;
	}
</style>